<template>
  <div>
    <cus-search class="mb_20">
      <cus-search-item>
        <Form class="flex" ref="formValidate" :model="form" :label-width="120">
          <FormItem class="mr_48 mb_20" label="验收日期">
            <el-date-picker
              type="week"
              :picker-options="{ firstDayOfWeek: 1 }"
              format="yyyy 第 WW 周"
              v-model="form.dateTime[0]"
              placeholder="选择周"
              @change="dateWeekChange"
              transfer
              :clearable="false"
            >
            </el-date-picker>
          </FormItem>
          <FormItem class="mr_48 mb_20" label="伙食单位" prop="unitCode">
            <Select
              v-model="form.unitCode"
              style="width: 200px"
              placeholder="全部"
            >
              <Option v-if="tabName != 'consume'" value="all">全部</Option>
              <Option
                v-for="item in dropSelectList"
                :key="item.id"
                :value="item.unitCode"
              >
                {{ item.unitName }}</Option
              >
            </Select>
          </FormItem>
          <Button class="mr_24 mb_20" type="primary" @click="search()">查询</Button>
          <Button class="mr_24 mb_20" type="default" @click="reset()">重置</Button>
        </Form>
      </cus-search-item>
    </cus-search>
    <div class="content-bottom">

    <cus-card>
   
 
      <Tabs v-model="tabName">
        <TabPane label="入库详情" name="inStorageTable"
          ><inStorageTable ref="inStorageTable" :form="form"></inStorageTable
        ></TabPane>
        <TabPane label="出库详情" name="outStorageTable"
          ><outStorageTable ref="outStorageTable" :form="form"></outStorageTable
        ></TabPane>
        <TabPane label="消耗详情" name="consume"
          ><consume ref="consume" :form="form"></consume
        ></TabPane>
      </Tabs>
    </cus-card>
  </div>
  </div>
</template>
  <script>
import { getSubCanteenList } from "@/api/organ/organization";
import inStorageTable from "./components/inStorageTable/inStorageTable.vue";
import outStorageTable from "./components/outStorageTable/outStorageTable.vue";
import consume from "./components/consume/consume.vue";

export default {
  components: { inStorageTable, outStorageTable, consume },
  data() {
    return {
      tabName: "inStorageTable",
      form: {
        dateTime: [
          new Date(
            new Date().setHours(0, 0, 0) -
              (new Date().getDay() - 1) * 24 * 60 * 60 * 1000
          ),
          new Date(
            new Date().setHours(0, 0, 0) +
              (7 - new Date().getDay()) * 24 * 60 * 60 * 1000
          ),
        ], // 验收日期
        unitCode: null, // 下级单位
      },
      dropSelectList: [], // 下级单位tree数据
    };
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 240; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    this.getSubCanteenListApi();
  },
  methods: {
    search() {
      if (this.tabName == "inStorageTable") {
        this.$refs["inStorageTable"].onInit();
      }
      if (this.tabName == "outStorageTable") {
        this.$refs["outStorageTable"].onInit();
      }
      if (this.tabName == "consume") {
        this.$refs["consume"].onInit();
      }
    },
    reset() {
      this.form.dateTime = [
        new Date(
          new Date().setHours(0, 0, 0) -
            (new Date().getDay() - 1) * 24 * 60 * 60 * 1000
        ),
        new Date(
          new Date().setHours(0, 0, 0) +
            (7 - new Date().getDay()) * 24 * 60 * 60 * 1000
        ),
      ];
      this.getSubCanteenListApi().then(() => {
        if (this.tabName != "consume") {
          this.$refs["formValidate"].resetFields();
        }
        this.search();
      });
    },
    dateWeekChange(time) {
      this.form.dateTime[0] = this.getCurrentWeek(time)[0];
      this.form.dateTime[1] = this.getCurrentWeek(time)[6];
    },
    // 查询下级单位
    getSubCanteenListApi() {
      return new Promise((resolve, reject) => {
        getSubCanteenList()
          .then((res) => {
            if (res.code === 1) {
              this.dropSelectList = res.data.list;
              if (res.data.list.length > 0) {
                if (this.tabName == "consume") {
                  this.form.unitCode = this.form.unitCode ? this.form.unitCode :  res.data.list[0].unitCode;
                  console.log(this.form.unitCode);
                } else {
                  // console.log('**********',this.form.unitCode)
                  // if(this.form.unitCode==''||this.form.unitCode==null||this.form.unitCode==undefined) {
                  //   this.form.unitCode = ""
                  // }
                }
              }
              resolve();
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    // 获取本周日期组件处理
    getCurrentWeek(date) {
      let nowData = new Date(date); //传入时间参数,如 2021-11-09 获取给定日期所属的周 日期
      let currentDay = nowData.getDay();
      if (currentDay == 0) {
        currentDay = 7;
      }
      let beforweek = [],
        afterWeek = [];
      for (let i = 1; i <= 7; i++) {
        if (currentDay - i >= 0) {
          let DayTime =
            nowData.getTime() - (currentDay - i) * 24 * 60 * 60 * 1000;
          beforweek.push(new Date(DayTime).Format("yyyy-MM-dd"));
        } else {
          let DayTime = nowData.getTime() + (8 - i) * 24 * 60 * 60 * 1000;
          afterWeek.push(new Date(DayTime).Format("yyyy-MM-dd"));
        }
      }
      afterWeek = afterWeek.reverse();
      let dateList = [...beforweek, ...afterWeek];
      console.log(dateList);
      return dateList;
    },
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 260; // 表格自适应高度
      }, 100);
    },
  },
  watch: {
    tabName: {
      handler(nVal) {
        this.getSubCanteenListApi().then(() => {
          this.$refs[nVal].onInit();
        });
      },
      // immediate: true,
      deep: true,
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
};
</script>
  <style lang="scss" scoped>
// @import "./index.scss";
</style>
  